<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-08 09:49:29
 * @LastEditTime: 2022-04-08 11:13:36
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 水印
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水印</title>
</head>

<body id="watermark">
  <canvas id="canvas"></canvas>
</body>
<script>
  const watermark = document.getElementById('watermark')
  const drawWaterMark = () => {
    const canvas = document.getElementById('canvas') //可省略
    canvas.width = 200
    canvas.height = 200
    canvas.style.display = 'none'
    const ctx = canvas.getContext('2d')
    ctx.font = '16px 苹方'
    ctx.fillStyle = 'rgba(0,0,0,.3)'
    ctx.rotate(-0.3)
    ctx.fillText('hhh', canvas.width / 8, canvas.height / 8)
    const img = canvas.toDataURL('image/png')
    const style = `background-image:url(${img})`
    watermark.setAttribute('style', style)
  }
  drawWaterMark()

  // const callBack = () => {
  //   drawWaterMark()

  // }
  // const observer = new MutationObserver(callBack);
  // const targetNode = watermark
  // observer.observe(targetNode, { attributes: true });


</script>

</html>